<template>
    <div class="layout-pd">
        <div class="container">
            <div class="search-btns">
                <div class="btns">
                    <el-button v-if="auth(state.isHasAdd)" size="default" color="#18bc9c" @click="addFn">+
                        添加</el-button>
                </div>
                <div class="search">
                    <el-input v-model="state.formData.keyword" placeholder="请根据运单号搜索" class="input-with-select">
                        <template #append>
                            <el-button :icon="Search" @click="searchFn" />
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="tables">
                <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
                    :data="state.tableData" :columnData="state.columnData" :isPage="true" :total="state.total"
                    :page="state.pages.page" :psize="state.pages.limit" @size-change="sizeChange"
                    @current-change="currentChange" :showOperator="true">
                    <template v-slot:is_damaged="{ row }">
                        <span>{{ statusObj[row.is_damaged] }}</span>
                    </template>
                    <template v-slot:is_compensation="{ row }">
                        <span>{{ statusObj[row.is_compensation] }}</span>
                    </template>
                    <template v-slot:operate="{ row }">
                        <el-button v-if="auth(state.isHasEdit)" type="primary" text size="small"
                            @click="editRow(row)">编辑</el-button>
                        <el-popconfirm v-if="auth(state.isHasDelete)" title="确定删除吗？" @confirm="operateFn('del', row)">
                            <template #reference>
                                <el-button type="primary" text size="small">取消</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </YxTable>
            </div>
        </div>
        <AddDetail ref="addDetailRef" @updateList="getData"></AddDetail>
    </div>
</template>

<script setup name="orderFeeIndex">
import { Search } from '@element-plus/icons-vue'
import { getLogisticsList } from '/@/api/logistics/index';
import { logisticsColumn } from '/@/commmon/column';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { auth } from '/@/utils/authFunction';
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'));
const AddDetail = defineAsyncComponent(() => import('./addIogistics.vue'));
const addDetailRef = ref()
const state = reactive({
    isHasAdd: 'admin:admin:logisticsAdd',
    isHasEdit: 'admin:admin:logisticsEdit',
    isHasDelete: 'admin:admin:logisticsDelete',
    formData: {
        keyword: ''
    },
    columnData: logisticsColumn,
    total: 0,
    pages: {
        page: 1,
        limit: 10
    },
    tableData: [],
})
const addFn = () => {
    addDetailRef.value.openDialog('add')
}
const editRow = (row) => {
    addDetailRef.value.openDialog('edit', row)
}
const statusObj = ref({
    0: '是',
    1: '否',
})
const getData = () => {
    const params = {
        page: state.pages.page,
        pageNum: state.pages.limit,
        search: state.formData.keyword,
    }
    getLogisticsList(params).then((res) => {
        if (res.code === 10000) {
            state.tableData = res.data.list
            state.total = res.data.pageInfo.count
        }
    })
}
const currentChange = (val) => {
    state.pages.page = val
    getData()
}
const sizeChange = (val) => {
    state.pages.limit = val
    getData()
}
const searchFn = () => {
    state.pages.page = 1;
    state.pages.limit = 10;
    getData()
}
onMounted(() => {
    searchFn()
})
</script>

<style scoped lang="scss">
.container {
    background: #FFFFFF;
    padding: 15px;

    ::v-deep .search-btns {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-input-group__append {
            padding: 0px 15px;

            .el-icon {
                color: #333333;
                margin-right: 0px;
            }
        }

        .el-button {
            color: #FFFFFF;
        }
    }

    .tables {
        margin-top: 10px;
    }
}
</style>
